<template>
  <el-dropdown trigger="click">
    <div class="avatar">
      <el-avatar :size="32" :src="AvatarChangeDialogState.userImgUrl"></el-avatar>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="openDialog('infoRef')">
          <jxtech-svg-icon icon="#icon-gerenxinxi" :size="14"></jxtech-svg-icon>
          <span>&nbsp;{{ $t("header.personalData") }}</span>
        </el-dropdown-item>
        <el-dropdown-item @click="AvatarChangeDialogState.changeAvatar">
          <jxtech-svg-icon icon="#icon-Accounts" :size="14"></jxtech-svg-icon>
          <span>&nbsp;{{ $t("header.changeAvatar") }}</span>
        </el-dropdown-item>
        <el-dropdown-item @click="PasswordChangeDialogState.changePassword">
          <jxtech-svg-icon icon="#icon-xiugaimima" :size="14"></jxtech-svg-icon>
          <span>&nbsp;{{ $t("header.changePassword") }}</span>
        </el-dropdown-item>
        <el-dropdown-item>
          <jxtech-svg-icon icon="#icon-qiehuan" :size="14"></jxtech-svg-icon>
          <el-popover
            trigger="hover"
            placement="right"
            :offset="20"
            :show-arrow="false"
            :popper-style="{
              width: 'auto'
            }"
          >
            <template #reference>
              <span>&nbsp;{{ $t("header.changeDept") }}</span>
            </template>
            <div class="content">
              <div
                v-for="(item, index) in userStore.userDeptList"
                :key="index"
                class="deptItem"
                @click="deptChangeState.changeDepart(item)"
              >
                {{ item.value }}<el-tag v-if="userStore.userDeptId === item.key" size="small">当前</el-tag>
              </div>
            </div>
          </el-popover>
        </el-dropdown-item>
        <el-dropdown-item divided @click="logout">
          <jxtech-svg-icon icon="#icon-Logout" :size="14"></jxtech-svg-icon>
          <span>&nbsp;{{ $t("header.logout") }}</span>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <!-- infoDialog -->
  <InfoDialog ref="infoRef"></InfoDialog>
  <!-- passwordDialog -->
  <password-dialog ref="passwordRef" v-model:visible="PasswordChangeDialogState.passwordVisible"></password-dialog>
  <avatar-change-dialog
    ref="avatarChangeRef"
    v-if="AvatarChangeDialogState.avatarVisible"
    v-model:visible="AvatarChangeDialogState.avatarVisible"
    :img-url="AvatarChangeDialogState.userImgUrl"
    @update-user-avatar-id="AvatarChangeDialogState.onUpdateUserAvatarId"
  ></avatar-change-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, Ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/modules/user";
import { ElMessageBox, ElMessage } from "element-plus";
import InfoDialog from "./InfoDialog.vue";
import PasswordDialog from "./password-dialog.vue";
import AvatarChangeDialog from "./avatar-change-dialog.vue";
import { downloadFileUrl } from "@/api/modules/org/file-attachment";
import { getAccessToken } from "@/utils/common";
import { JxtechToken } from "@/stores/interface/token";
import { AxiosResponse } from "axios";
import { PAGES_CONFIG } from "@/config/pages";

const router = useRouter();
const userStore = useUserStore();

// 退出登录
const logout = () => {
  ElMessageBox.confirm("您是否确认退出登录?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    await userStore.logout();
    ElMessage.success("退出登录成功！");
  });
};

/**个人信息 */
const infoRef = ref<InstanceType<typeof InfoDialog> | null>(null);
/**修改密码 */
const passwordRef = ref<InstanceType<typeof PasswordDialog> | null>(null);
/**修改头像 */
const avatarChangeRef = ref<InstanceType<typeof AvatarChangeDialog> | null>(null);
const openDialog = (ref: string) => {
  if (ref == "infoRef") infoRef.value?.openDialog();
};

/**修改头像 */
const AvatarChangeDialogState = reactive({
  userImgUrl: userStore.userImageUrl ? downloadFileUrl + userStore.userImageUrl : "",
  avatarVisible: false,
  changeAvatar: () => (AvatarChangeDialogState.avatarVisible = true),
  onUpdateUserAvatarId(avatarId: string) {
    AvatarChangeDialogState.userImgUrl = downloadFileUrl + avatarId;
  }
});

/**修改密码 */
const PasswordChangeDialogState = reactive({
  passwordVisible: false,
  changePassword: () => {
    PasswordChangeDialogState.passwordVisible = true;
  }
});

/** 切换部门 */
const deptChangeState = reactive({
  changeDepart: (item: any) => {
    if (userStore.userDeptId === item.key) return false;
    ElMessageBox.confirm("是否确认切换部门到 " + item.value + "?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      lockScroll: false
    }).then(() => {
      userStore
        .login({
          actionType: "depart",
          account: item.key,
          password: "token:" + getAccessToken()?.replace("Bearer ", "")
        })
        .then(async (res: AxiosResponse<JxtechToken>) => {
          await userStore.loginSuccessAfter(res.data);
          await location.reload();
        })
        .catch(err => {});
    });
  }
});
</script>

<style scoped lang="scss">
.el-avatar {
  cursor: pointer;
}
.deptItem {
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: initial;
  padding: 8px;
}
.deptItem:hover {
  background-color: #e6f4ff;
}
</style>
